<template>
    <div class="">
        <div class="title">
            <span>还款计划表</span>
            <div>
                <el-button type="primary"  @click="See()">查看借款合同</el-button>
                <!-- <el-button icon="el-icon-refresh"></el-button> -->
            </div>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <!-- <el-tab-pane label="所有产品" name="first"> -->
                    <el-table :data="unread" style="width: 100%">
                        <el-table-column align="center" type="index" label="序号"></el-table-column>
                        <el-table-column align="center" label="还款时间">
                            <template slot-scope="scope" >
                                <div class="message-conter">{{scope.row.due_date}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="期数（月）">
                            <template slot-scope="scope" >
                                <div class="message-conter">{{scope.row.nper}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="应还本金（元）">
                            <template slot-scope="scope">
                                <div class="message-conter">{{scope.row.basic_cost/100}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="应还利息（元）">
                            <template slot-scope="scope">
                                <div class="message-conter">{{scope.row.rate_cost/100}}</div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" label="还款状态">
                            <template slot-scope="scope">
                                <div class="message-type">待还款</div>
                                <div class="message-type1">已还款</div>
                            </template>
                        </el-table-column> -->
                    </el-table>
                <!-- </el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {jsyMer, jsyGetrepayplan} from "@/api/api"
import md5 from "js-md5";
    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [],
                username:'',
                applicationId:'',
                formId:''
            }
        },
        created(){
            this.getPermissions()
            this.jsyMer()
            // this.jsyGetrepayplan()
        },
        methods: {
            //获取权限
            getPermissions(){
                var aaa = sessionStorage.getItem('userInfo')
                var bbb = JSON.parse(aaa)
                this.username = bbb.username
                console.log(this.username)
            },
            jsyMer(){
                jsyMer({},this.username).then(res => {
                    if(res.code == 405){
                        sessionStorage. removeItem('token')
                        this.$router.push('/login');
                    }else{
                        this.applicationId = res.data.loan.applicationId
                        this.formId = res.data.loan.formId
                        console.log(this.formId)
                        if(this.applicationId && this.formId){
                            this.jsyGetrepayplan()
                        }
                    }
                })
            },
            jsyGetrepayplan(){
                jsyGetrepayplan({
                    application_id: this.applicationId,
                    form_id: this.formId,
                    uid: this.username
                }).then(res => {
                    console.log(res)
                    this.unread = res.data.plans
                    console.log(this.unread)
                })
            },
            See () {
                // let url = 'http://jie2.test.jisucloud.cn/partner/entry'
                // let url = 'http://m.test.jisucloud.cn/partner/entry'
                let url = 'https://jie.jisujie.com/partner/entry'
                // let key = "4c9db51879546ea1605a4e4ad2c1e3ae"
                let key = "718afc3c29f92af7c8f26ba0c3b26c75"
                const now = new Date().getTime()
                let partner = 'partner=shoubei#$&ts='+ now +'#$&uid='+ this.username +'#$&key=' + key
                let sign = md5(partner)
                window.open(url +'?ts='+ now +'&partner=shoubei&uid='+ this.username + '&sign=' + sign ); 
            },
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
}
.message-title{
    /* cursor: pointer; */
    font-size: 22px;
}
.handle-row{
    margin-top: 30px;
}
.message-title1{
    color: #999;
}
.message-conter{
    font-size: 16px;
}
.message-type{
    font-size: 16px;
    color: #FC7D46
}
.message-type1{
    font-size: 16px;
}
</style>

